<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>

    <th:block th:include="central/include :: header('系统首页')" />
    <th:block th:include="include :: vue2-org-tree-css" />

    <style>
        .ibox-content{
            padding: 0px;
        }
        .row{
            width: 100%;
            margin: 0px;
        }

        .operationStationsItem {
            cursor:pointer
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        #container {
            position: relative;
            padding: 20px;
            height: 50px;
        }

        #left_side {
            position: absolute;
            top: 20px;
            left: 20px;
            border: solid 0px #e7eaec;
            width: 200px;
            height: 100%;
        }

        #content {
            margin: 0px 210px 0px 210px;
            border: solid 0px #e7eaec;
            height: 100%;
            font-size:35px;
            text-align: center;
        }

        #right_side {
            position: absolute;
            top: 20px;
            right: 20px;
            border: solid 0px #e7eaec;
            width: 170px;
            height: 100%;
            font-size: medium;
            text-align: center;
        }
        .area {
            /*height: 700px;*/
            /*margin: 20px 20px 20px 20px;*/
            height: 100%;
            margin: 0px 10px;
        }
        .areaLineList {
            /*height: 350px;*/
            height: 100%;
            background-color: white;
            padding: 10px 0px;
        }

        .operationStationsContainer {
            height: 100%;
            border-radius: 3px;
            border: solid 1px gray;
            margin: 0px;
        }

        .area1{
            width:calc( calc(100% - 10px)/8 );
            position: relative;
        }
        .area2{
            width:calc(calc(100% - 20px) /4);
            position: relative;
        }
        .area3{
            width: calc(calc(100% - 40px) /2);
            position: relative;
        }
        .area4{
            width: calc(calc(100% - 20px) /2);
            position: relative;
        }
        .areaContent{
            display: inline-block;
            height: 100%;
            border-radius: 3px;
            border: solid 1px gray;
            margin-bottom: 5px;
        }
        .areacontentbottom{
            /*position:absolute;*/
            height: 70px;
            width: 100%;
            background-color: transparent;
            border-top: solid 1px #e7eaec;
            bottom: 0px;
            line-height: 70px;
            text-align: center;
            font-weight: 800;
            font-family:Arial,sans-serif;
        }
        .areacontenttop{
            position:relative;
            height: calc(100% - 72px);
            padding: 0px;
            width: 100%;
            top: 0px;
        }
        .areacontenttopitem{
            height: calc(100% - 10px);
            background-color: white;
            position: absolute;
            border: solid 1px #e7eaec;
            top: 5px;
        }
        .operationStationsItem{
            padding: 5px;
            margin: 0px;
            height: calc(100% - 72px);
        }
        .operationStationsItemContainer{
            background-color: white;
            border: solid 1px #e7eaec;
            width: 100%;
            height: 100%;
        }
        .operationStationsItemHead{
            margin: 0px;
        }
        .operationStationsItemHead>div{
            padding: 0px;
        }
        .title_head{
            position:absolute;
            text-align: left;
            height: 30px;
            padding: 0px;
            top: 5px;
            width: 100% ;
        }
        .info{
            margin: 0px;
            height: calc(100% - 45px);
        }
        .cellhead{
            /*width: 50%;height: 85px;float: left*/
            padding: 0px;
        }
        .cell{
            border-radius: 3px;
            margin: 0 auto;
            width:60px;
            height:60px;
            background-color: gray;
            text-align: center;
            line-height: 60px;
            color: white;
        }
        .processinfo{

            border: solid 1px #e7eaec;
            border-radius: 3px;
            background-color: green;
            text-align: center;
            color: white;
            font-size: small;
        }
        p{
            text-align: center;
            margin: 0px;
        }
        .cellhead {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .automaticArea:hover{
            /* 光标是一个红色的圈加一个斜杠）*/
            cursor:not-allowed;
        }

        /*文字不自动换行*/
        .operationStationsContainer div,h4,p,span{
            white-space:nowrap;
            text-overflow:ellipsis;
            word-break:break-all;
            overflow:hidden;
        }
        .operation-station-processing-status{
            text-align: center;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div th:replace="central/header::header('集合管控系统')"></div>
    <div class="ibox-content" id="app">
        <div class="row">
            <div class="area">
                <div class="areaLineList" >
                    <template v-for="(area,index) in areaList">
                        <div :class="'areaContent area'+area.operationStations.length" v-render="area.id" >
                            <div class="operationStationsContainer row">
                                <template v-for="(operationStation,index1) in area.operationStations" >
                                    <div :class="'operationStationsItem manualArea col-sm-'+12/area.operationStations.length">
                                        <div class="operationStationsItemContainer">
                                            <div style="height:40px;">
                                                <div class="operationStationsItemHead row">
                                                    <div class="col-sm-6"  style="line-height: 30px;"  :title="operationStation.name" >{{operationStation.name}}</div>
                                                    <div class="col-sm-6 operation-station-processing-status" v-if="operationStation.taskStatus">
                                                        <el-tag
                                                                v-for="(item,index) in taskStatusDataList"
                                                                v-if="item.dictValue == operationStation.taskStatus"
                                                                :key="item.index"
                                                                :type="item.listClass"
                                                                effect="dark">
                                                            {{ item.dictLabel }}
                                                        </el-tag>
                                                    </div>
                                                    <div class="col-sm-6 operation-station-processing-status" v-else>
                                                        <el-tag type="" effect="dark">空闲中</el-tag>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="info row">
                                                <div class="cellhead col-sm-6">
                                                    <p>产品编号</p>
                                                    <div class="cell">
                                                        <el-tooltip effect="dark" :content="operationStation.materialNo|formatData" placement="top">
                                                            <span>{{operationStation.materialNo|formatData}}</span>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                                <div class="cellhead col-sm-6">
                                                    <p>产品批次号</p>
                                                    <div class="cell">
                                                        <el-tooltip effect="dark" :content="operationStation.batchNo|formatData" placement="top">
                                                            <span>{{operationStation.batchNo|formatData}}</span>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                                <div class="cellhead col-sm-6">
                                                    <p>当前工序</p>
                                                    <div class="cell">
                                                        <el-tooltip effect="dark" :content="operationStation.processStepName|formatData" placement="top">
                                                            <span>{{operationStation.processStepName|formatData}}</span>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                                <div class="cellhead col-sm-6">
                                                    <p>加工时长</p>
                                                    <div class="cell">
                                                        <el-tooltip effect="dark" :content="operationStation.processingTime|formatData" placement="top">
                                                            <span>{{operationStation.processingTime|formatData}}</span>
                                                        </el-tooltip>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div class="areacontentbottom">{{area.name}}</div>
                        </div>
                    </template>
                </div>
            </div>

        </div>

    </div>
</div>

<th:block th:include="central/include :: footer" />
<th:block th:include="include :: vue2-org-tree-js" />
<script th:inline="javascript">

    const prefix = ctx+"central/stationSelection"

    let areaOfColorDatas = [[${@dict.getType('area_of_color')}]];
    let taskStatusDatas = [[${@dict.getType('sys_task_status')}]];
    //物料缓存map
    const materialCacheMap = new Map();


    const vm  = new Vue({
        el:'#app',
        data(){
            return{
                areaList:[],
                areaType:area_type,
                activeOperationStation:{},
                areaOfColorMap:new Map(),
                taskStatusDataList:taskStatusDatas
            }
        },methods:{
            getAreaOperationStation() {
                $.axiosRequest.get(prefix+"/list")
                    .then(res=>{
                        let data = res.data
                        this.areaList = data
                    })
            }
        },filters:{
            //data 为字段 map对象
            echoDictLabel(value,data,defaultValue='无'){
                if(data.has(key))
                    return data.get(key)
                return defaultValue
            },formatData(value,defaultValue='无'){
                if(value){
                    return value
                }
                return defaultValue
            }
        },directives:{
            render(el,binding,vnode){
                const {value} =binding
                if(value){
                    const areaOfColorMap = vm.$data.areaOfColorMap
                    el.style.backgroundColor = areaOfColorMap.get(value.toString()).cssClass
                }
            }
        },created(){
            this.getAreaOperationStation()
            areaOfColorDatas.forEach((item)=>this.areaOfColorMap.set(item.dictValue,item))
        }
    })
</script>
</body>
</html>

